<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css"
	href="../Styles/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<style type="text/css">
#mian {
	width: 1000px;
	margin-left: 80px;
	margin-top: 50px;
}

.record {
	margin-top: 10px;
}

</style>
</head>
<body>
	<div id="mian">
		<ul id="myTab" class="nav nav-tabs">
			<li class="active"><a href="#home" data-toggle="tab">我发布的计划</a>
			</li>
			<li><a href="#ios" data-toggle="tab">我参与的计划</a></li>
		</ul>
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="home">
				<div id="condition">
					主题: <input type="text" name="" id="title">
					&nbsp;&nbsp;&nbsp; 日期: <input type="date" name="" id="startDate">&nbsp;至&nbsp;<input type="date" id="endDate">&nbsp;&nbsp;&nbsp;
					<button class="btn btn-primary" id="seach">查询</button>
					<br>
					<button class="btn btn-success" id="addplan">发布计划</button>
					&nbsp;&nbsp;&nbsp;
					<button class="btn btn-danger" id="delete">清理数据</button>
				</div>
				<div class="record">
					<table class="table" id="table">
						<tr>
							<th><input type="checkbox" id="checkall" /></th>
							<th>计划主题</th>
							<th>开始时间</th>
							<th>结束时间</th>
							<th>类型</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
						<tr v-for="plan in planList">
							<td><input type="checkbox" name="checkbox" value="{{plan.pid}}"></td>
							<td>{{plan.ptitle}}</td>
							<td>{{plan.startDate}}</td>
							<td>{{plan.stopDate}}</td>
							<td>{{plan.psetting}}</td>
							<td>{{plan.pstate}}</td>
							<td>
								<button type="button" class="btn btn-default btn-xs look" v-bind:value=plan.pid>查看</button>
								 <template v-if="plan.pstate=='未完成'">
								<button type="button" class="btn btn-default btn-xs finish" v-bind:value=plan.pid>完成</button>
								<button type="button" class="btn btn-default btn-xs edit" v-bind:value=plan.pid>编辑</button>
								</template>
								
							</td>
						</tr>
					</table>
					<div id="layPage"></div>
				</div>

				<div class="modal fade  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  id="look-details">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title">信息浏览</h4>
							</div>
							<div class="modal-body">
								<table class="table table-s1" id="table-s1">
								   <tr>
								      <td>开始日期</td>
								      <td>{{plan.startDate}}</td>
								   </tr>
								   <tr>
								      <td>结束日期</td>
								      <td>{{plan.stopDate}}</td>
								   </tr>
								   <tr>
								      <td>完成状态</td>
								      <td>{{plan.pstate}}</td>
								   </tr>
								   <tr>
								      <td>参与人</td>
								      <td>{{plan.partcipant_id}}</td>
								   </tr>
								   <tr>
								      <td>备注</td>
								      <td>{{plan.premark}}</td>
								   </tr>
								   <tr>
								      <td>内容</td>
								      <td>{{plan.pcontent}}</td>
								   </tr>
								</table>
							</div>
							<div class="modal-footer" >	
							   <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
				<!-- /.modal -->
				
				
				<div class="modal fade  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  id="edit-details">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title">信息编辑</h4>
							</div>
							
							<div class="modal-body">
							  <form action="../changePlanWork" method="post" id="plan-from">
							    <input type="hidden" value="{{plan.pid}}" name="pid">
								<table class="table table-s2" id="table-s2">
								   <tr>
								      <td>开始日期</td>
								      <td><input type="date" name="startDate" value="{{plan.startDate}}"></td>
								   </tr>
								   <tr>
								      <td>结束日期</td>
								      <td><input type="date" name="stopDate" value="{{plan.stopDate}}"></td>
								   </tr>
								   <tr>
								      <td>负责人</td>
								      <td><input type="text" name="pwheel_id" value="{{plan.pwheel_id}}"></td>
								   </tr>
								   <tr>
								      <td>参与人</td>
								      <td><input type="text" name="partcipant_id" value="{{plan.partcipant_id}}"></td>
								   </tr>
								   <tr>
								      <td>备注</td>
								      <td><textarea rows="7" cols="45" name="premark">{{plan.premark}}</textarea> </td>
								   </tr>
								   <tr>
								      <td>内容</td>
								      <td><textarea rows="10" cols="50" name="pcontent">{{plan.pcontent}}</textarea></td>
								   </tr>
								</table>
							 </form>
							</div>
							<div class="modal-footer" id="table-footer">	
							   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
							   <button type="button" class="btn btn-primary from-submit" data-dismiss="modal">提交</button>
							  
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>

			</div>
			<div class="tab-pane fade" id="ios">
			   <div>
			      <table class="table" id="table2">
						<tr>
							<th><input type="checkbox" id="checkall" /></th>
							<th>计划主题</th>
							<th>开始时间</th>
							<th>结束时间</th>
							<th>类型</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
						<tr v-for="plan in planList">
							<td><input type="checkbox" name="checkbox" value="{{plan.pid}}"></td>
							<td>{{plan.ptitle}}</td>
							<td>{{plan.startDate}}</td>
							<td>{{plan.stopDate}}</td>
							<td>{{plan.psetting}}</td>
							<td>{{plan.pstate}}</td>
							<td>
								<button type="button" class="btn btn-default btn-xs look" v-bind:value=plan.pid>查看</button>		 
								
							</td>
						</tr>
					</table>
					<div id="layPage2"></div>
			   </div>
			   
			   <div class="modal fade  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  id="look-details2">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title">信息浏览</h4>
							</div>
							<div class="modal-body">
								<table class="table table-s2" id="table-s4">
								   <tr>
								      <td>开始日期</td>
								      <td>{{plan.startDate}}</td>
								   </tr>
								   <tr>
								      <td>结束日期</td>
								      <td>{{plan.stopDate}}</td>
								   </tr>
								   <tr>
								      <td>完成状态</td>
								      <td>{{plan.pstate}}</td>
								   </tr>
								   <tr>
								      <td>参与人</td>
								      <td>{{plan.partcipant_id}}</td>
								   </tr>
								   <tr>
								      <td>备注</td>
								      <td>{{plan.premark}}</td>
								   </tr>
								   <tr>
								      <td>内容</td>
								      <td>{{plan.pcontent}}</td>
								   </tr>
								</table>
							</div>
							<div class="modal-footer" >	
							   <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
			   
			   
			</div>
		</div>
		<script>
        $(function () {
        	var currentPage=1;
            $('#myTab li:eq(0) a').tab('show');
            
            $("#addplan").click(function(){
            	window.location.href="addplan.jsp";
            });
            
            var vue = new Vue({
            	el:".record",
            	data:{planList:""},
            	methods :{
            		getPlanList:function(){
            			var startDate = $("#startDate").val();
            			var endDate = $("#endDate").val();
            			var title = $("#title").val();
            			var _self = this;
            			$.ajax({
            				url:'../getWorkPlan',
            				type:'post',
            				data:{'startDate':startDate,'endDate':endDate,'currentPage':currentPage,'title':title},
            				dataType:'json',
            				success :function(result){
            					console.log(result);
            					_self.planList=result.planList;
            					
            					laypage({
            						cont:$("#layPage"),//分页内容所有显示的容器位置 
            						pages:result.mixPages,//分页显示的总页数
            						curr:currentPage,//当前页
           						 skin:'molv',//皮肤
           						 skip:true,//支持跳页的功能
           						 last:'尾页',
           						 groups:result.limit, 
           						 jump:function(obj,first){//触发分页后的回调
           							 currentPage=obj.curr;
           							 if(!first){//一定要加此判断，否则初始时会无限刷新
           								$("#checkall").removeAttr("checked");//取消复选框选中状态
           								vue.getPlanList();//获取当前页
           							  }
            						 }
            					});
            					
            				}
            			})
            		}
            	}
            })
            vue.getPlanList();
            
            $("#seach").click(function(){
            	vue.getPlanList();
            })
            
            $("#table").on('click','.finish', function(){
        	 var id=$(this).val();  	
        	  console.log(id);
        	  $.ajax({
        		  url:'../changePlanStart',
        		  type:'post',
        		  data:{'pid':id},
        		  dataType:'json',
        		  success : function(result){
        			  if(result==true){
        				  alert("修改成功")
        				  vue.getPlanList();
        			  }else{
        				  alert("失败");
        			  }
        		  }
        	  })
           })
           
           var pid;
          //显示模态框查看信息
           $("#table").on('click','.look', function(){
        	   pid=$(this).val();
        	   console.log(pid)
        	   vue2.getWookPlan();
        	   $("#look-details").modal("show");
        	   
        	   
           })
        	
           var vue2 = new Vue({
        	   el:"#table-s1",
        	   data:{plan:""},
        	   methods:{
        		   getWookPlan :function(){
        			   var _self = this;
        			   $.ajax({
        				   url:'../getPlanByid',
        				   type:'post',
        				   data:{'pid':pid},
        				   dataType:'json',
        				   success : function(result){
        					   console.log(result);
        					   _self.plan=result;
        					   console.log(_self.plan);
        				   }
        			   })
        		   }
        	   }
           })
          
           $("#table").on('click','.edit', function(){
        	   pid=$(this).val();
        	   vue3.getWookPlan();
        	   $("#edit-details").modal("show"); 
           })
           
             var vue3 = new Vue({
        	   el:"#plan-from",
        	   data:{plan:""},
        	   methods:{
        		   getWookPlan :function(){
        			   var _self = this;
        			   $.ajax({
        				   url:'../getPlanByid',
        				   type:'post',
        				   data:{'pid':pid},
        				   dataType:'json',
        				   success : function(result){
        					   console.log(result);
        					   _self.plan=result;
        					   console.log(_self.plan);
        				   }
        			   })
        		   }
        	   }
           })
              
           $("#table-footer").on('click','.from-submit', function(){     	   
        	   $("#plan-from").submit();
           })
           
           
           $("#checkall").on("click",function() { 
   			if ($(this).prop("checked") == true) {
   				$("input[name='checkbox']").each(function() {
   					$(this).prop("checked", true);
   				});
   			}
   			else {  
   				$("input[name='checkbox']").each(function() {  
   					$(this).prop("checked", false);  
   				});  
   			}  
   		}); 
        
          $("#delete").click(function(){
        	  var str="";
     		 $("input[name='checkbox']").each(function(){
     			 if($(this).prop("checked")==true){
     				 str +=$(this).val()+",";
     			 }
     		 })
     		  console.log(str);
     		  if(confirm("确认删除")){
     			  $.ajax({
     				  url:'../deletePlan', 
     				  type:'post',
     				  data:{'str':str},
     				  dataType:'json',
     				  success:function(result){
     					  if(result){
     						 alert("删除成功")
    						 currentPage=1;
     						 vue.getPlanList();
     					  }else{
     						  alert("失败")
     					  }
     				  }
     			  })
     		  }
          })
          
          
          
        }); 
    </script>
    
	</div>
	<script type="text/javascript">
	
	$(function(){
		var currentPage = 1;
		var vue3 = new Vue({
	  	  el:'#table2',
	  	  data:{planList:""},
	    	methods :{
	    		getPlanList:function(){
	    			var _self = this;
	    			$.ajax({
	    				url:'../getMyPlan',
	    				type:'post',
	    				data:{'currentPage':currentPage},
	    				dataType:'json',
	    				success :function(result){
	    					console.log(result);
	    					_self.planList=result.planList;
	    					
	    					laypage({
	    						cont:$("#layPage2"),//分页内容所有显示的容器位置 
	    						pages:result.mixPages,//分页显示的总页数
	    						curr:currentPage,//当前页
	   						 skin:'molv',//皮肤
	   						 skip:true,//支持跳页的功能
	   						 last:'尾页',
	   						 groups:result.limit, 
	   						 jump:function(obj,first){//触发分页后的回调
	   							 currentPage=obj.curr;
	   							 if(!first){//一定要加此判断，否则初始时会无限刷新
	   								vue3.getPlanList();//获取当前页
	   							  }
	    						 }
	    					});
	    					
	    				}
	    			})
	    		}
	    	}
	    })
		vue3.getPlanList();
		var pid;
	    //显示模态框查看信息
	     $("#table2").on('click','.look', function(){
	  	   pid=$(this).val();
	  	   console.log(pid)
	  	   vue2.getWookPlan();
	  	   $("#look-details2").modal("show");
	  	   
	  	   
	     })
	  	
	     var vue2 = new Vue({
	  	   el:"#table-s4",
	  	   data:{plan:""},
	  	   methods:{
	  		   getWookPlan :function(){
	  			   var _self = this;
	  			   $.ajax({
	  				   url:'../getPlanByid',
	  				   type:'post',
	  				   data:{'pid':pid},
	  				   dataType:'json',
	  				   success : function(result){
	  					   console.log(result);
	  					   _self.plan=result;
	  					   console.log(_self.plan);
	  				   }
	  			   })
	  		   }
	  	   }
	     })
	})
	
	</script>
</body>
</html>